<template>
    <div class="LED">
        <div class="nav">
            <img :src="back" style="width: 24px;height: 20.93px;" @click="backRouter"/>
            <view class="title">Barrage</view>
            <img :src="dowenLoad" style="width: 24px;height: 24px;" @click="dowenLoadLED"/>
        </div>
        <div class="makeLED">
            <img :src="ledBG" style="width: calc(100% + 5px);height: calc(100% + 5px);z-index: 9;" />
            <view class="wai">
                <view class="wai" style="width: 100%;">
                    <view class="looKLED" :class="scrollFX == 0 ? 'scrollRight' : scrollFX == 1 ? 'scrollLeft' : ''">
                        <view :class="scrollFX != -1 ? 'mainShape textLeft' : 'mainShape'" v-if="shapeCheck != -1" :style=" {backgroundImage:'url(' + shapePicList[shapeCheck] + ')', fontFamily: textStyle.fontFamily,  fontSize: textStyle.Size, backgroundSize: shapeSize}" >{{ textValue }}</view>
                        <view :class="scrollFX != -1 ? 'mainTitle textLeft' : 'mainTitle'" style="z-index: 9;position: absolute;" :style="{color: textStyle.fontColor, fontFamily: textStyle.fontFamily,  fontSize: textStyle.Size, textShadow: `4px 4px 0px ${textStyle.shadowColor}`}">  {{textValue }}</view>
                    </view>
                </view>
                <div class="mainBG" v-if="bgcCheck != -1">
                    <img :src="textStyle.bgc.val" style="width: 100%;height: 100%;" v-if="textStyle.bgc.type == 1 && bgcCheck == 10"/>
                    <img :src="bgcList[bgcCheck - 11]" style="width: 100%;height: 100%;" v-if="textStyle.bgc.type == 1 && bgcCheck !== 10"/>
                    <div class="mainBGC" :style="{ backgroundColor: colorList[textStyle.bgc.val]}" v-else></div>
                </div>
            </view>

        </div>
        <div class="textInput">
            <van-field v-model="textValue" placeholder="Please enter text" maxlength="50"/>
        </div>
        <div class="mean" v-if="styleType == 0">
            <div class="tab">
                <div v-for="(item, index) in tab1" :key="index" :class="checkTab1 == index ? 'tabItem checkItem' : 'tabItem'" @click="checkTab1 = index">{{ item }}</div>
            </div>
            <div class="chooseStyle1" v-if="checkTab1 == 0">
                <div v-for="(item, index) in fontList" :key="index" :style="{fontFamily: item}" :class="fontCheck == index ? 'fontItem isFont' : 'fontItem'" @click="changeFont(index)">Love You</div>
            </div>
            <div class="chooseStyle1" v-if="checkTab1 == 1">
                <div v-for="(item, index) in colorList" :key="index"  style="flex: 20%;display: flex;align-items: center;margin-bottom: 14px;justify-content: center;position: relative;" @click="changeColor('fontColor', index)">
                    <div :style="{backgroundColor: item}" class="colorItem"></div>
                    <img :src="check"  style="width: 24px;height: 24px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" v-if="colorCheck == index"/>
                </div>
            </div>
            <div class="chooseStyle1" v-if="checkTab1 == 2">
                <div v-for="(item, index) in colorList" :key="index"  style="flex: 20%;display: flex;align-items: center;margin-bottom: 14px;justify-content: center;position: relative;" @click="changeColor('shadowColor', index)">
                    <div :style="{backgroundColor: item}" class="colorItem"></div>
                    <img :src="check"  style="width: 24px;height: 24px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" v-if="shadowCheck == index"/>
                </div>
            </div>
        </div>
        <div class="mean" v-if="styleType == 1">
            <div class="tab">
                <div v-for="(item, index) in tab2" :key="index" :class="checkTab2 == index ? 'tabItem checkItem' : 'tabItem'" @click="checkTab2 = index">{{ item }}</div>
            </div>
            <div class="chooseStyle1" v-if="checkTab2 == 0">
                <div v-for="(item, index) in 15" :key="index" style="flex: 20%;display: flex;justify-content: center;" @click="changeShape(index)">
                    <div :class="shapeCheck == index ? 'fontItem isFont' : 'fontItem'" style="width: 55px;height: 38px;margin-bottom: 16px;display: flex;justify-content: center;align-items: center;position: relative;">
                        <img :src="shapeList[index]" style="width: 28px;height: 28px;"/>
                        <img v-if="index >= 5" :src="coins"  style="position: absolute; top: -10px;right: -10px;width: 20px;height: 20px;z-index: 999; "/>
                    </div>
                </div>
            </div>
            <div class="chooseStyle1" v-if="checkTab2 == 1">
                <div v-for="(item, index) in colorList" :key="index"  style="flex: 20%;display: flex;align-items: center;margin-bottom: 14px;justify-content: center;position: relative;" @click="changeColor('bgc', index, 0)">
                    <div :style="{backgroundColor: item}" class="colorItem"></div>
                    <img :src="check"  style="width: 24px;height: 24px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" v-if="bgcCheck == index"/>
                </div>
                <div style="flex: 20%;width: 48px;height: 48px;margin-bottom: 16px;display: flex;justify-content: center;align-items: center;position: relative;" @click="changeColor('bgc', 10, 1)">
                    <div :class="bgcCheck == 10 ? 'fontItem isFont' : 'fontItem'" style="width: 48px;height: 48px;display: flex;justify-content: center;align-items: center;margin-bottom: 0;" >
                        <img :src="picIcon" style="width: 28px;height: 28px;"/>
                        <!-- <img :src="coins"  style="position: absolute; top: -5px;right: 0px;width: 20px;height: 20px;z-index: 999; "/> -->
                    </div>
                </div>
    
                <div v-for="(item, index) in 9" :key="index" style="flex: 20%;display: flex;justify-content: center;align-items: center;margin-bottom: 14px;position: relative;" @click="changeColor('bgc', index+11 , 1)" >
                    <img :src="bgcList[index]" :class="bgcCheck - 11 == index? 'checkBGC bgcStyle' : 'bgcStyle'"/>
                    <img :src="coins"  style="position: absolute; top: -5px;right: 0px;width: 20px;height: 20px;z-index: 999; "/>
                </div>

            </div>
        </div>
        <div class="mean scrollMean" v-if="styleType == 2">
            <div style="margin-bottom: 20px;">Scroll direction</div>
            <div style="width: 60%;display: flex;justify-content: space-around;margin-bottom: 20px;">
                <div class="scrollFX">
                    <img :src="scrollright" style="width: 36px;height: 36px;" @click="domScroll(0)"/>
                </div>
                <div class="scrollFX">
                    <img :src="scrollLeft" style="width: 36px;height: 36px;" @click="domScroll(1)"/>
                </div>
            </div>
            <div style="margin-bottom: 20px;">Scroll speed</div>
            <div class="chengeSize" style="margin-top: 0;margin-bottom: 0px;">
            <view>Speed</view>
            <van-slider max="15" min="0" active-color="#03DCFA" inactive-color="#9C9C9C" bar-height="6px" v-model="scrollSpeed" style="margin-left: 20px;z-index: 9;" @change="ChangeSpeed">
                <template #button>
                    <div style="width: 20px;height: 20px;background: #03DCFA;border-radius: 10px;"></div>
                </template>
            </van-slider>
        </div>
        </div>
        <div class="chengeSize" v-if="(checkTab2 != 1 || styleType != 1) && styleType != 2">
            <view>Size</view>
            <van-slider max="150" active-color="#03DCFA" inactive-color="#9C9C9C" bar-height="6px" v-model="fontSize" style="margin-left: 20px;z-index: 9;" @change="ChangeSize">
                <template #button>
                    <div style="width: 20px;height: 20px;background: #03DCFA;border-radius: 10px;"></div>
                </template>
            </van-slider>
        </div>
        <div v-else class="chengeSize" style="height: 1vh;"></div>
        <div class="next">
            <img :src="left" class="nextItem" v-if="styleType == 0"/>
            <img :src="leftActive" class="nextItem" v-else @click="styleType--"/>
            <img :src="right" class="nextItem" v-if="styleType == 2"/>
            <img :src="rightActive" class="nextItem" v-else @click="styleType++"/>
        </div>

    </div>
    <van-popup v-model:show="showPop" round style="background-color: transparent;">
        <div class="popModel">
            <img class="closePop" :src="closePop" @click="showPop = false"/>
            <div>This is an app that can make Led pop-ups, you can custom edit the text content, color and font of the pop-up, you can also add different pattern effects to the text, as well as a variety of backgrounds to choose from, and finally, you can adjust the scrolling direction and speed of the pop-up.</div>
            <div>PAY POINTS: When you use the paid material with the gold coin logo in the upper right corner, you need to pay 10coins for clicking save, without using the paid click save is free.</div>
        </div>
    </van-popup>
</template>
<script setup>
import coins from '../assets/store/coins.png'
import { showDialog, showToast,showConfirmDialog } from 'vant';
import html2canvas from 'html2canvas';
import closePop from '../assets/closePop.png'
import back from '../assets/back.png'
import dowenLoad from '../assets/led/dowenLoad.png'
import ledBG from '../assets/led/ledBG.png'
import check from '../assets/led/check.png'
import left from '../assets/led/left.png'
import leftActive from '../assets/led/left-action.png'
import right from '../assets/led/right.png'
import rightActive from '../assets/led/right-action.png'
import shape1 from "../assets/led/shape/shape1.png";
import shape2 from "../assets/led/shape/shape2.png";
import shape3 from "../assets/led/shape/shape3.png";
import shape4 from "../assets/led/shape/shape4.png";
import shape5 from "../assets/led/shape/shape5.png";
import shape6 from "../assets/led/shape/shape6.png";
import shape7 from "../assets/led/shape/shape7.png";
import shape8 from "../assets/led/shape/shape8.png";
import shape9 from "../assets/led/shape/shape9.png";
import shape10 from "../assets/led/shape/shape10.png";
import shape11 from "../assets/led/shape/shape11.png";
import shape12 from "../assets/led/shape/shape12.png";
import shape13 from "../assets/led/shape/shape13.png";
import shape14 from "../assets/led/shape/shape14.png";
import shape15 from "../assets/led/shape/shape15.png";
import picIcon from "../assets/led/picIcon.png"
import scrollLeft from "../assets/led/scroll-left.png"
import scrollright from "../assets/led/scroll-right.png"
import {bgc1, bgc2, bgc3, bgc4, bgc5, bgc6, bgc7, bgc8, bgc9} from "../assets/led/bgcList"
import {shapePic1, shapePic2, shapePic3, shapePic4, shapePic5, shapePic6, shapePic7, shapePic8, shapePic9, shapePic10, shapePic11, shapePic12, shapePic13, shapePic14, shapePic15} from "../assets/led/shapeList"
import { useRouter } from "vue-router";
import { nextTick, onMounted, reactive, ref } from 'vue'
const router = useRouter()
let showPop = ref(true)
let shapePicList = ref([shapePic1, shapePic2, shapePic3, shapePic4, shapePic5, shapePic6, shapePic7, shapePic8, shapePic9, shapePic10, shapePic11, shapePic12, shapePic13, shapePic14, shapePic15])
let bgcList = ref([bgc1, bgc2, bgc3, bgc4, bgc5, bgc6, bgc7, bgc8, bgc9])
let shapeList = ref([shape1, shape2, shape3, shape4, shape5, shape6, shape7, shape8, shape9, shape10, shape11, shape12, shape13, shape14, shape15])
let styleType = ref(0)
let tab1 = ref(['Font', 'Color', 'Shadow'])
let tab2 = ref(['Shape', 'Background'])
let fontList = ref(['SFProTextRegular', 'SansitaOne','SairaStencilOne', 'SonsieOne', 'SpicyRice', 'RubikGlitch'])
let colorList = ref(['#FFFFFF', '#03DCFA', '#675BEE', '#E6FF80', '#FA5C03', '#C246FD', '#FA037A', '#5BEEC2', '#FFA680', '#FAE103'])
let checkTab1 = ref(0)
let checkTab2 = ref(0)
let textValue = ref('')
let fontCheck = ref(0)
let colorCheck = ref(0)
let shadowCheck = ref(-1)
let fontSize = ref(40)
let shapeCheck = ref(-1)
let bgcCheck = ref(-1)
let scrollSpeed = ref(9)
let textStyle = reactive({
    Size: `40px`,
    fontFamily: 'SFProTextRegular',
    fontColor: '#FFFFFF',
    shadowColor: 'transparent',
    shape: -1,
    bgc: {type: 0, val: ''}
})
let backRouter = () => {
    router.back()
}
let changeFont = (index) => {
    fontCheck.value = index
    textStyle.fontFamily = fontList.value[index]
}
let changeShape = (index) => {
    if (shapeCheck.value == index) {
            shapeCheck.value = -1
            textStyle.shape = -1
        }else {
            shapeCheck.value = index
            textStyle.shape = index
        }
}
let changeColor = (item, index, type) => {
    if (item == 'fontColor') {
        colorCheck.value = index
        textStyle[item] = colorList.value[index]
    }else if (item ==  'bgc'){
        if (index == 10) {
            upPic()
        }else {
            if (bgcCheck.value == index) {
            bgcCheck.value = -1
            textStyle[item] = {type, val: ''}
            }else {
                bgcCheck.value = index
                textStyle[item] = {type, val: index}
            }
        }
    }else {
        if (shadowCheck.value == index) {
            shadowCheck.value = -1
            textStyle[item] = 'transparent'
        }else {
            shadowCheck.value = index
            textStyle[item] = colorList.value[index]
        }
    }
}
let upPic = () => {
    window['picture'] = (data)=>{
        bgcCheck.value = 10
        textStyle['bgc'] = {type: 1, val: data}
	}
	window['send'](`terms://photo?type=${0}`);
}
let shapeSize = ref('6%')
let ChangeSize = (val) => {
    textStyle.Size = val+'px'
    shapeSize.value = (val / 13).toFixed(0) + '%'
}

let scrollFX = ref(-1)
let domScroll = (val) => {
    scrollFX.value = val
}

let num = {15: 1, 14: 2, 13: 3,12: 4, 11: 5, 10: 6,9: 7, 8: 8,7: 9, 6: 10, 5:11, 4: 13, 3: 13, 2: 14, 1: 15 ,0: 0}
let speedNum = ref('6s')
let dowenLoadGifTime = ref(9)
let ChangeSpeed = (val) => {
    dowenLoadGifTime.value = num[val]
    speedNum.value = num[val] + 's'
}
let dowenLoadLED = () => {
    if (!textValue.value) {
        showToast('Please enter text');
        return
    }
    if (shapeCheck.value >= 5 || (textStyle.bgc.type == 1 && textStyle.bgc.val >= 11)) {
        showConfirmDialog({
          message:'Saving requires 10 coins. After successful saving, you can view it in the History Center。',
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel'
        })
        .then(() => {
            saveHistory(1)
        })
    }else {
        showConfirmDialog({
          message:'After successful saving, you can view it in the history center.',
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel'
        })
        .then(() => {
            saveHistory(0)
        })
    }

}
let saveHistory = (type) => {
    if ( type == 1 && coinsNum.value < 10 ) {
        showToast('Not enough coins');
        return
    }
    let addStyle = {
        text: textValue.value,
        Size: textStyle.Size,
        fontFamily: textStyle.fontFamily,
        fontColor: textStyle.fontColor,
        shadowColor: textStyle.shadowColor,
        shapeID: textStyle.shape,
        bgc: textStyle.bgc.type == 1 && bgcCheck.value == 10 ? {type: 2, val: textStyle.bgc.val} : textStyle.bgc,
        scrollFX: scrollFX.value, // 0  右， 1 左
        speed: speedNum.value,
        shapeSize: shapeSize.value
    }
    try{
        let history = localStorage.getItem("LEDHistory") ? JSON.parse(localStorage.getItem("LEDHistory")) : []
        localStorage.setItem('LEDHistory', JSON.stringify([addStyle, ...history]))
        if (type == 1) {
            localStorage.setItem('LEDWork', coinsNum.value - 10)
            coinsNum.value = coinsNum.value - 10
        }
        showToast('success');
        reSize()
    }catch{
        showToast('Please change the picture or clear the history');
    }

}
const reSize = () => {
    textValue.value = '',
    styleType.value = 0
    checkTab1.value = 0
    checkTab2.value = 0
    textValue.value = ''
    fontCheck.value = 0
    colorCheck.value = 0
    shadowCheck.value = -1
    fontSize.value = 40
    shapeCheck.value = -1
    bgcCheck.value = -1
    scrollSpeed.value = 9,
    scrollFX.value = -1,
    textStyle = { Size: `40px`, fontFamily: 'SFProTextRegular', fontColor: '#FFFFFF', shadowColor: 'transparent', shape: -1, bgc: {type: 0, val: ''} }
}
let coinsNum = ref(0)
onMounted(() => {
    coinsNum.value = localStorage.getItem('LEDWork') ? Number(localStorage.getItem('LEDWork')) : 0
})
</script>
<style scoped>
@import "../common/font.css";

.LED {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    background-color: #000000;
    color: #fff;
    padding: 0px 17px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}
.nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: FredokaOne;
    font-weight: 400;
    font-size: 28px;
    align-items: center;
    position: relative;
    margin-bottom: 23px;
    margin-top: 56px;
}
.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.makeLED {
    width: 343px;
    /* height: 216.55px; */
    height: 26vh;
    margin-top: 5vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wai {
    position: absolute;
    overflow: hidden;
    /* top: 0;
    left: 50%;
    transform: translateX(-50%); */
    width: 90%;
    height: 100%;
    z-index: 10;
    padding: 14px;
    padding-bottom: 27px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.looKLED {
    flex-shrink: 0;
    position: absolute;
    /* overflow: hidden; */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
    height: 100%;
    z-index: 9;
    padding: 14px;
    padding-bottom: 27px;
    box-sizing: border-box;

}
.mainBG {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    padding: 15px 0;
    padding-bottom: 31px;
    box-sizing: border-box;
}
.mainBGC {
    width: 100%;
    height: 100%;
    /* background-color: v-bind('colorList[textStyle.bgc.val]'); */
}
.mainTitle {
    position: relative;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* font-size: v-bind('textStyle.Size');
    font-family: v-bind('textStyle.fontFamily');
    color: v-bind('textStyle.fontColor');
    text-shadow: 4px 4px 0px v-bind('textStyle.shadowColor'); */
}
.textLeft {
    /* justify-content: flex-start; */
}
.mainShape {
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    background-repeat: repeat;
    /* background-size: v-bind('shapeSize'); */
    background-origin: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
    /* font-size: v-bind('textStyle.Size');
    font-family: v-bind('textStyle.fontFamily'); */
}
.textInput {
    width: 100%;
    height: 56px;
    background: #000000;
    box-shadow: 0px 0px 19px 0px #04D8F7;
    border-radius: 9px 9px 9px 9px;
    border: 2px solid #03DDFA;
    margin-top: 40px;
    display: flex;
    align-items: center;
}
 .van-cell {
    background-color: #000000;
    color: #fff !important;
}
:deep(.van-field__control) {
    color: #fff !important;
    background-color: #000000;
    font-family: SFProTextRegular !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-align: center;
}
:deep(.van-field__control::-webkit-input-placeholder) {
    color: #fff !important;
    background-color: #000000;
    font-family: SFProTextRegular !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-align: center;
}

.mean {
    width: 100%;
    margin-top: 30px;
}
.tab {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: FredokaOne;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 31px;
}
.tabItem {
    position: relative;
}
.checkItem::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 29px;
    height: 2px;
    background: #03DCFA;
    border-radius: 2px 2px 2px 2px;
}
.chooseStyle1 {
    width: 100%;
    max-height: 15vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important ;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.fontItem {
    width: 91px;
    height: 45px;
    background: #0291A5;
    border-radius: 8px 8px 8px 8px;
    font-weight: 800;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    line-height: 45px;
    margin-bottom: 18px;
}
.isFont {
    background: #03DCFA;
}
.colorItem {
    flex-shrink: 0;
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 24px;
}
.chengeSize {
    width: 100%;
    margin: 2vh 0;
    font-family: FredokaOne;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}
.next {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.nextItem {
    width: 35px;
    height: 40px;
}
.bgcStyle {
    width: 48px;
    height: 48px;
    border-radius: 8px 8px 8px 8px;
    border: 2px solid transparent;
}
.checkBGC {
    border: 2px solid #03DDFA;
}
.scrollMean {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: FredokaOne;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
}
.scrollFX {
    width: 12vw;
    height: 12vw;
    background: #FF00CC;
    border-radius: 12px 12px 12px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scrollRight {
    animation: startRight v-bind('speedNum') linear infinite;

}
@keyframes startRight {
    0% {
        transform: translateX(0%);
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: translateX(800%);
    }
    51% {
        opacity: 0;
        transform: translateX(-800%);
    }
    52% {
        opacity: 1;
        transform: translateX(-800%);
    }
    100% {
        transform: translateX(0%);
    }
}
.scrollLeft {
    animation: startLeft v-bind('speedNum') linear infinite;
}
@keyframes startLeft {
    0% {
        transform: translateX(0%);
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: translateX(-800%);
    }
    51% {
        opacity: 0;
        transform: translateX(800%);
    }
    52% {
        opacity: 1;
        transform: translateX(800%);
    }
    100% {
        transform: translateX(0%);
    }
}
.popModel {
    width: 70vw;
    background: rgba(255,255,255,0.9);
    padding: 22px;
    padding-top: 40px;
    border-radius: 20px;
    white-space:pre-wrap !important;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    font-family: FredokaOne;
    position: relative;
}
.closePop {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
}
</style>